<template>
	<div class="leave">
		<div class="head">
			<div class="left1">
				<el-input v-model="inpWord" :value="inpWord" placeholder="请输入申请人" placeholder-class="placeholder"
					@keyup.enter.native="searchApplicant"></el-input>
				<el-button icon="el-icon-search" style="background-color: #106ab1;color: #fff;"
					@click="searchApplicant">搜索</el-button>
			</div>
			<el-button type="primary" icon="el-icon-circle-plus-outline" @click="goApplyfor">申请</el-button>
		</div>
		<div class="hosttable">
			<el-table :data="tableList">
				<el-table-column type="index" label="编号" width="110">
					<template slot-scope="scope">
						00{{ scope.$index + 1 }}
					</template>
				</el-table-column>
				<el-table-column prop="userName" label="申请人"></el-table-column>

				<el-table-column prop="typeId" label="请假类">
					<template slot="header" slot-scope="scope">
						<el-dropdown @command="siftuser2" trigger="click">
							<span class="el-dropdown-link">
								请假类<i class="el-icon-arrow-down el-icon--right"></i>
							</span>
							<el-dropdown-menu slot="dropdown">
								<el-dropdown-item @click="quanb">全部</el-dropdown-item>
								<el-dropdown-item v-for="x in options1" :key="x.typeName"
									:command="x.typeId">{{ x.typeName }}</el-dropdown-item>
							</el-dropdown-menu>
						</el-dropdown>
					</template>
					<template slot-scope="scope">
						<span v-if="scope.row.typeId == 1">事假</span>
						<span v-if="scope.row.typeId == 3">病假</span>
						<span v-if="scope.row.typeId == 4">出差</span>
					</template>
				</el-table-column>

				<el-table-column prop="startTime" label="请假时间" width="290px">
					<template slot-scope="scope">
						<span class="tooitp" format="yyyy-MM-dd"
							value-format="yyyy-MM-dd">{{ tableList[scope.$index].startTime }}~{{
								tableList[scope.$index].endTime }}</span>
					</template>
				</el-table-column>

				<el-table-column prop="status" label="审批状态">
					<template slot="header" slot-scope="scope">
						<el-dropdown @command="siftuser" trigger="click">
							<span class="el-dropdown-link">
								审批状态<i class="el-icon-arrow-down el-icon--right"></i>
							</span>
							<el-dropdown-menu slot="dropdown">
								<el-dropdown-item command=3>全部</el-dropdown-item>
								<el-dropdown-item command=0>待审批</el-dropdown-item>
								<el-dropdown-item command=1>审批通过</el-dropdown-item>
								<el-dropdown-item command=2>审批未通过</el-dropdown-item>
							</el-dropdown-menu>
						</el-dropdown>
					</template>

					<template slot-scope="scope">
						<span v-if="scope.row.status == 0" style="color: #aba9a9;">待审批</span>
						<span v-if="scope.row.status == 1" style="color: #6aad39;">审批通过</span>
						<span v-if="scope.row.status == 2" style="color: #fe0000;">审批未通过</span>
					</template>
				</el-table-column>

				<el-table-column prop="" label="操作" width="">
					<template slot-scope="scope">
						<span style="margin: 0 5px; color: green;" class="sp1" @click="changeUser(scope.row)">修改</span>
						<span style="color: red;" class="sp1" @click="delUser(scope.row)">删除</span>
					</template>
				</el-table-column>
				<el-table-column>
					<template slot-scope="scope">
						<span class="btn3" @click="goDetail(scope.row)">详情</span>
					</template>
				</el-table-column>
			</el-table>

			<div class="pageBox">
				<el-pagination layout="prev, pager, next" :total="totalSize" :page-size="pageSize"
					:current-page.sync="pageIndex" @current-change="changePage">
				</el-pagination>
			</div>


			<!-- 删除 -->
			<el-dialog :visible.sync="centerDialogVisible" width="30%" center>
				<p style="font-size: 14px;text-align: center;font-weight: bolder;">确认删除</p>
				<span slot="footer" class="dialog-footer">
					<el-button type="primary" @click="deleteuser()">确 定</el-button>
					<el-button @click="centerDialogVisible = false">取 消</el-button>
				</span>
			</el-dialog>

			<!-- 修改 -->

			<el-dialog class="popup" title="修改" :visible.sync="ModifyDialogVisible" center>
				<div class="modify">
					<el-form ref="myForm" :model="formData" class="form" :rules="rules">
						<el-form-item label="申请人:" prop="userId">
							<el-input v-model="formData.userName" placeholder="请输入申请人名称" disabled></el-input>
						</el-form-item>
						<el-form-item label="请假原因:" prop="content">
							<el-input v-model="formData.content" placeholder="说明原因"></el-input>
						</el-form-item>
						<el-form-item label="请假类:" prop="typeId">
							<el-select v-model="formData.typeName" clearable placeholder="请选择请假类">
								<el-option v-for="item in options1" :key="item.value" :label="item.typeName"
									:value="item.typeId">
								</el-option>
							</el-select>
						</el-form-item>
						<el-form-item label="审批人:" prop="adminId">
							<el-select v-model="formData.adminName" clearable placeholder="请选择审批人">
								<el-option v-for="item in options2" :key="item.value" :label="item.userName"
									:value="item.userId">
								</el-option>
							</el-select>
						</el-form-item>
						<el-form-item label="请假起始时间:" prop="startTime">
							<el-date-picker v-model="formData.startTime" type="date" placeholder="请选择起始时间">
							</el-date-picker>
						</el-form-item>
						<el-form-item label="请假截止时间:" prop="endTime">
							<el-date-picker v-model="formData.endTime" type="date" placeholder="请选择截止时间">
							</el-date-picker>
						</el-form-item>
						<el-form-item>
							<el-button type="primary" @click="updateUser('myForm')">确定</el-button>
							<el-button @click="qux">取消</el-button>
						</el-form-item>
					</el-form>
				</div>
			</el-dialog>
		</div>
	</div>
</template>

<script>
export default {
	data() {
		return {
			startTime2: "",
			endTime2: "",
			baseUrl: require("../js/baseUrl.js").baseUrl,
			timeStr1: '',
			timeStr2: '',
			tableList: [], //列表
			pageIndex: 1, //第几页
			pageSize: 5, //每页显示5条
			totalSize: 0, //总页数
			inpWord: "", //搜索内容
			centerDialogVisible: false, //删除弹窗
			ModifyDialogVisible: false, //修改弹窗
			loadId2: "", //修改
			formData: { //修改
				username: '',
				userId: '',
				num: '',
				typeName: "",
				adminName: '',
				adminId: '',
				content: '',
				typeId: '',
				startTime: '',
				endTime: '',
				userName: '',
				status: ''
			},
			statusa: null, //审批状态
			typeids: null, //请假类
			options1: [], //请假类
			options2: [], //审批人
			totol: "", //获取审批人
			hostIds: "", //删除
			rules: {
				userId: [{
					required: true,
					message: '申请人不能为空',
					trigger: 'blur'
				}],
				content: [{
					required: true,
					message: '请假原因不能为空',
					trigger: 'blur'
				}],
				typeName: [{
					required: true,
					message: '请假类不能为空',
					trigger: 'blur'
				}],
				num: [{
					required: true,
					message: '请假天数不能为空',
					trigger: 'blur'
				}],
				adminName: [{
					required: true,
					message: '审批人不能为空',
					trigger: 'blur'
				}],
				startTime: [{
					required: true,
					message: '起始时间不能为空',
					trigger: 'blur'
				}],
				endTime: [{
					required: true,
					message: '截止时间不能为空',
					trigger: 'blur'
				}],
			},

		}
	},
	methods: {
		//处理列表时间
		time2() {
			//console.log(this.tableList)
			this.tableList.forEach(v => {
				this.startTime2 = v.startTime.substring(0, 10)
				this.endTime2 = v.endTime.substring(0, 10)
				//console.log(v.endTime. substring(0,10))
				v.startTime = this.startTime2
				v.endTime = this.endTime2
			})
		},
		//跳转申请
		goApplyfor() {
			this.$router.push("/leavemanager/applfor")
		},
		//跳转详情
		goDetail(info) {
			//console.log(info)
			this.$router.push("/leavemanager/details?loaId=" + info.loaId)
		},
		//请假类筛选
		siftuser2(command) {
			/* console.log(command) */
			this.typeids = command
			this.pageIndex = 1
			this.getUser()
		},
		//请假类筛选全部
		quanb() {
			this.$http.post(this.baseUrl + "SchoolSys/uloa/searchUloa", {
				pageIndex: this.pageIndex,
				pageSize: this.pageSize,
				typeId: this.typeids,
				name: this.inpWord,
			}).then(res => {
				/*   console.log(res) */
				/*    console.log("获取") */
				var data = res.data
				if (data.code == 200) {
					this.totalSize = res.data.data.pageCount * this.pageSize
					this.tableList = res.data.data.data
					this.time2()
				}
			})
		},
		//审批状态筛选
		siftuser(command) {
			this.statusa = command
			this.pageIndex = 1
			this.getUser(command)
		},
		//点击分页
		changePage(page) {
			this.pageIndex = page;
			this.getUser()

		},
		//搜索
		searchApplicant() {
			//console.log(this.inpWord)
			this.pageIndex = 1
			this.inpWord = this.inpWord.trim()
			this.getUser()
		},

		//请假天数
		getDiffDay(){
			let myStartTime = Date.parse(this.formData.startTime)
			let myEndTime = Date.parse(this.formData.endTime)
			//console.log(myStartTime,myEndTime)
			let diffDate=Math.abs(myStartTime - myEndTime)
			if(myStartTime===myEndTime){
				this.formData.num=1
			}else{
				let diffDate = Math.abs(myStartTime - myEndTime)
				this.formData.num = Math.ceil(diffDate / (1000 * 3600 * 24))//向上取整
			}
		},
		//修改
		changeUser(changeUserData) {
			//console.log(changeUserData)
			this.formData.userId = changeUserData.userId
			this.formData.userName = changeUserData.userName
			this.formData.content = changeUserData.content
			this.formData.typeName = changeUserData.typeName
			this.formData.typeId = changeUserData.typeId
			this.formData.adminName = changeUserData.adminName
			this.formData.adminId = changeUserData.adminId
			this.formData.startTime = changeUserData.startTime
			this.formData.endTime = changeUserData.endTime

			this.loadId2 = changeUserData.loaId
			this.ModifyDialogVisible = true

			this.originalContent = changeUserData.content
			this.originalNum = changeUserData.num
			this.originalStartTime = changeUserData.startTime
			this.originalEndTime = changeUserData.endTime

			this.options2.forEach((v => {
				if (this.formData.adminId == v.adminName) {
					this.formData.adminName = v.adminId
				}
			}))

			this.options1.forEach(v => {
				if (this.formData.typeName == v.typeName) {
					this.formData.typeName = v.typeId
				}
			})
		},
		updateUser(form) {
			this.$refs[form].validate((valid) => {
				if (valid) {
					this.time()
					this.getDiffDay()//请假天数

					//接口	SchoolSys/uloa/update
					this.$http.post(this.baseUrl + "SchoolSys/uloa/update", {
						userId: this.formData.userId+"",
						num: this.formData.num,
						adminId: this.formData.adminName,
						content: this.formData.content,
						typeId: this.formData.typeName,
						startTime: this.timeStr1,
						endTime: this.timeStr2,
						loaId: this.loadId2,
					}).then(res => {
						console.log(res)
						if (res.data.code == 200) {
							this.$message.success("该用户修改成功")
							this.getUser()
							this.ModifyDialogVisible = false
						} else {
							this.$message.error(res.data.msg)
						}
					})
				}
			})
		},

		//转换时间
		time() {
			this.timeStr1 = this.formData.startTime
			this.timeStr2 = this.formData.endTime
			var data = new Date(this.formData.startTime)
			const Y = data.getFullYear(); //年
			const M = data.getMonth() + 1; //月
			const D = data.getDate() //日
			this.timeStr1 = Y + "-" + M + '-' + D;

			var data2 = new Date(this.formData.endTime)
			const Y2 = data2.getFullYear(); //年
			const M2 = data2.getMonth() + 1; //月
			const D2 = data2.getDate(); //日
			this.timeStr2 = Y2 + "-" + M2 + '-' + D2
		},
		//修改里的取消
		qux() {
			this.ModifyDialogVisible = false
		},
		//获取审批人
		getapprovedby() {
			this.formData.userId=sessionStorage.getItem("userId")
			//接口	SchoolSys/user/findPasser
			this.$http.post(this.baseUrl + "SchoolSys/user/findPasser", {
				userId:this.formData.userId,
			}).then(res => {
				// console.log(res)
				if(res.data.code==200){
					this.options2 = res.data.data
				}
			})
		},
		//获取请假类
		getleavecategory() {
			//接口	SchoolSys/loaType/findAll
			this.$http.post(this.baseUrl + "SchoolSys/loaType/findAll", {

			}).then(res => {
				//console.log(res)
				this.options1 = res.data.data
			})
		},
		//删除
		delUser(userData) {
			this.centerDialogVisible = true
			this.hostIds = userData.loaId
			//console.log(this.hostIds)
		},
		deleteuser() {
			//console.log(loaId)
			//接口	SchoolSys/uloa/delete
			this.$http.post(this.baseUrl + "SchoolSys/uloa/delete", {
				loaId: this.hostIds,
			}).then(res => {
				//console.log(res)
				if (res.data.code == 200) {
					this.$message.success("该用户删除成功")
					this.getUser()
					this.centerDialogVisible = false
				} else {
					this.$message.error(res.data.msg)
				}
			})
		},
		//获取员工列表 
		getUser(statusa) {
			if (this.typeids != null && this.statusa != null && this.inpWord != '') {
				if (this.statusa == 3) {
					this.$http.post(this.baseUrl + "SchoolSys/uloa/searchUloa", {
						pageIndex: this.pageIndex,
						pageSize: this.pageSize,
						typeId: this.typeids,
						name: this.inpWord,
					}).then(res => {
						/*   console.log(res) */
						/*    console.log("获取") */
						var data = res.data
						if (data.code == 200) {
							this.totalSize = res.data.data.pageCount * this.pageSize
							this.tableList = res.data.data.data
							this.time2()
						}
					})
				} else {
					this.$http.post(this.baseUrl + "SchoolSys/uloa/searchUloa", {
						pageIndex: this.pageIndex,
						pageSize: this.pageSize,
						typeId: this.typeids,
						status: this.statusa,
						name: this.inpWord,
					}).then(res => {
						/*   console.log(res) */
						/*    console.log("获取") */
						var data = res.data
						if (data.code == 200) {
							this.totalSize = res.data.data.pageCount * this.pageSize
							this.tableList = res.data.data.data
							this.time2()
						}
					})
				}
			}
			if (this.typeids != null && this.inpWord != '') {
				this.$http.post(this.baseUrl + "SchoolSys/uloa/searchUloa", {
					pageIndex: this.pageIndex,
					pageSize: this.pageSize,
					typeId: this.typeids,
					name: this.inpWord,
				}).then(res => {
					/*   console.log(res) */
					/*    console.log("获取") */
					var data = res.data
					if (data.code == 200) {
						this.totalSize = res.data.data.pageCount * this.pageSize
						this.tableList = res.data.data.data
						this.time2()
					}
				})
			} else if (this.typeids != null && this.statusa != null) {
				if (this.statusa == 3) {
					this.$http.post(this.baseUrl + "SchoolSys/uloa/searchUloa", {
						pageIndex: this.pageIndex,
						pageSize: this.pageSize,
						typeId: this.typeids
					}).then(res => {
						/*   console.log(res) */
						/*    console.log("获取") */
						var data = res.data
						if (data.code == 200) {
							this.totalSize = res.data.data.pageCount * this.pageSize
							this.tableList = res.data.data.data
							this.time2()
						}
					})
				} else {
					this.$http.post(this.baseUrl + "SchoolSys/uloa/searchUloa", {
						pageIndex: this.pageIndex,
						pageSize: this.pageSize,
						typeId: this.typeids,
						status: this.statusa
					}).then(res => {
						/*   console.log(res) */
						/*    console.log("获取") */
						var data = res.data
						if (data.code == 200) {
							this.totalSize = res.data.data.pageCount * this.pageSize
							this.tableList = res.data.data.data
							this.time()
						}
					})
				}
			} else if (this.typeids != null) {
				this.$http.post(this.baseUrl + "SchoolSys/uloa/searchUloa", {
					pageIndex: this.pageIndex,
					pageSize: this.pageSize,
					typeId: this.typeids
				}).then(res => {
					/*   console.log(res) */
					/*    console.log("获取") */
					var data = res.data
					if (data.code == 200) {
						this.totalSize = res.data.data.pageCount * this.pageSize
						this.tableList = res.data.data.data
						this.time2()
					}
				})
			} else if (this.inpWord != '' && this.statusa != null) {
				if (this.statusa == 3) {
					this.$http.post(this.baseUrl + "SchoolSys/uloa/searchUloa", {
						pageIndex: this.pageIndex,
						pageSize: this.pageSize,
						name: this.inpWord,
					}).then(res => {
						/*   console.log(res) */
						/*    console.log("获取") */
						var data = res.data
						if (data.code == 200) {
							this.totalSize = res.data.data.pageCount * this.pageSize
							this.tableList = res.data.data.data
							this.time2()
						}
					})
				} else {
					this.$http.post(this.baseUrl + "SchoolSys/uloa/searchUloa", {
						pageIndex: this.pageIndex,
						pageSize: this.pageSize,
						name: this.inpWord,
						status: this.statusa
					}).then(res => {
						/*   console.log(res) */
						/*    console.log("获取") */
						var data = res.data
						if (data.code == 200) {
							this.totalSize = res.data.data.pageCount * this.pageSize
							this.tableList = res.data.data.data
							this.time2()
						}
					})
				}

			}
			//审批
			else if (this.statusa) {
				if (this.statusa == 3) {
					this.$http.post(this.baseUrl + "SchoolSys/uloa/searchUloa", {
						pageIndex: this.pageIndex,
						pageSize: this.pageSize,
					}).then(res => {
						/*   console.log(res) */
						/* console.log("审批") */
						var data = res.data
						if (data.code == 200) {
							this.totalSize = res.data.data.pageCount * this.pageSize
							this.tableList = res.data.data.data
							this.inpWord = ""
							this.time2()
						}
					})
				} else {
					this.$http.post(this.baseUrl + "SchoolSys/uloa/searchUloa", {
						pageIndex: this.pageIndex,
						pageSize: this.pageSize,
						status: this.statusa
					}).then(res => {
						/*   console.log(res) */
						/*   console.log("审批") */
						var data = res.data
						if (data.code == 200) {
							this.totalSize = res.data.data.pageCount * this.pageSize
							this.tableList = res.data.data.data
							this.inpWord = ""
							this.time2()
						}
					})
				}
			} else if (this.inpWord != '') {
				this.$http.post(this.baseUrl + "SchoolSys/uloa/searchUloa", {
					pageIndex: this.pageIndex,
					pageSize: this.pageSize,
					name: this.inpWord
				}).then(res => {
					/*   console.log(res) */
					/*    console.log("sousuo") */
					var data = res.data
					if (data.code == 200) {
						this.totalSize = res.data.data.pageCount * this.pageSize
						this.tableList = res.data.data.data
						this.time2()
					}
				})
			} else {
				this.$http.post(this.baseUrl + "SchoolSys/uloa/searchUloa", {
					pageIndex: this.pageIndex,
					pageSize: this.pageSize,
				}).then(res => {
					/*   console.log(res) */
					/*    console.log("获取") */
					var data = res.data
					if (data.code == 200) {
						this.totalSize = res.data.data.pageCount * this.pageSize
						this.tableList = res.data.data.data
						this.inpWord = ""
						this.time2()
					}
				})
			}
		},


	},
	mounted() {

		//获取员工列表
		this.getUser()
		//获取审批人
		this.getapprovedby()
		//获取请假类
		this.getleavecategory()

		this.formData.username = sessionStorage.getItem("userName")
	}
}
</script>

<style>
.head {
	margin: 40px 20px 0 40px;
	display: flex;
	justify-content: space-between;
}

.left1 {
	display: flex;
}

.left1 input {
	width: 250px;
	padding-left: 10px;
	margin-right: 20px;
	border: none;
	outline: none;
}

.left1 .placeholder {
	color: #999;
}

.sp1 {
	cursor: pointer;
}

.btn3 {
	color: #106ab1;
	cursor: pointer;
}

.approval {
	color: green;
}

.noapproval {
	color: red;
}

.hosttable .el-table {
	width: 95%;
	margin: 0 3%;
	background: transparent;
}

.hosttable .el-table * {
	border: none !important;
	text-align: center;
}

.hosttable .el-table table {
	border-spacing: 0px 10px;
}

.hosttable .el-table thead {
	color: #333;
}

.hosttable .el-table::before {
	height: 0;
}

.hosttable .el-input-group__append,
.el-input-group__prepend {
	color: #fff;
	font-size: 20px;
	background-color: #409EFF;
	border-top-right-radius: 10px;
	border-bottom-right-radius: 10px;
}

/* .hosttable .el-pagination button:disabled {
		background-color: transparent;
	}

	.hosttable .el-pagination .btn-prev {
		background-color: transparent;
	}

	.hosttable .el-pagination .btn-next {
		background-color: transparent;
	}

	.hosttable .el-pager li {
		background-color: transparent;
	} */

.hosttable .el-table th.el-table__cell {
	background-color: #f2f6ff;
}

.hosttable .el-icon-arrow-down {
	font-size: 16px;
	color: #000;
}

.popup .el-dialog {
	width: 30%;
}

.modify .form {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.modify .el-form-item {
	margin-bottom: 15px;
	display: flex;
}

.modify .el-input {
	width: 220px;
}

.modify .el-form-item__label {
	width: 110px;
	text-align: left;
}

.modify .el-dialog--center .el-dialog__body {
	text-align: center;
}

.modify .applforForm .el-form-item.is-required:not(.is-no-asterisk) .el-form-item__label-wrap>.el-form-item__label:before,
.el-form-item.is-required:not(.is-no-asterisk)>.el-form-item__label:before {
	content: '';
	margin-right: 0
}

.hosttable .pageBox {
	margin-top: 30px;
	text-align: center;

}

.itemm {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
</style>